<template>
  <div class="student-task-view">
    <h1>成绩列表</h1>

    <!-- PC端视图 -->
    <div v-if="!isMobile" class="pc-view">
      <el-table :data="studentTasks" style="width: 100%">
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>
        <el-table-column prop="realName" label="学生姓名"></el-table-column>
        <el-table-column prop="taskScore" label="任务分数"></el-table-column>
        <el-table-column prop="taskDeadline" label="截止日期"></el-table-column>
      </el-table>
    </div>

    <!-- 移动端视图 -->
    <div v-else class="mobile-view">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in mobileDisplayData" :key="item.id">
          <template #title>
            <div class="task-item-title">{{ item.taskName }}</div>
          </template>
          <template #label>
            <div class="task-item-label">
              <span>状态: {{ item.state }}</span>
              <span>班级: {{ item.className }}</span>
              <span>学生: {{ item.realName }}</span>
              <span>分数: {{ item.taskScore }}</span>
              <span>截止: {{ item.taskDeadline }}</span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';

const studentTasks = ref([]);
const isMobile = ref(false);

// 移动端列表相关状态
const mobileDisplayData = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const pageSize = 10; // 每次加载10条数据

const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768; // 根据屏幕宽度判断是否为移动端
};

const fetchStudentTasks = async () => {
  try {
    const response = await axios.get('/api/queryresult/studylist?currentUserID=18511&currNo=43', {
      headers: {
        'Access-Control-Allow-Origin': '*' // 代理后此行可移除
      }
    });
    if (response.data.errno === 0) {
      studentTasks.value = response.data.data;
      if (isMobile.value) {
        // 移动端初始化加载
        mobileDisplayData.value = [];
        page.value = 1;
        finished.value = false;
        onLoad(); // 触发第一次加载
      }
    } else {
      console.error('Error fetching student tasks:', response.data.errno);
    }
  } catch (error) {
    console.error('Error fetching student tasks:', error);
    loading.value = false; // 发生错误时停止加载
    finished.value = true; // 发生错误时标记为完成，避免无限加载
  }
};

const onLoad = () => {
  // 模拟异步加载
  setTimeout(() => {
    const start = (page.value - 1) * pageSize;
    const end = start + pageSize;
    const newItems = studentTasks.value.slice(start, end);

    mobileDisplayData.value.push(...newItems);

    loading.value = false;

    if (mobileDisplayData.value.length >= studentTasks.value.length) {
      finished.value = true;
    }
    page.value++;
  }, 1000); // 模拟网络请求延迟
};

onMounted(() => {
  checkIsMobile();
  window.addEventListener('resize', checkIsMobile);
  fetchStudentTasks();
});

onUnmounted(() => {
  window.removeEventListener('resize', checkIsMobile);
});
</script>

<style scoped>
.student-task-view {
  padding: 20px;
  background-color: #f9f9f9; /* 添加背景色 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加阴影 */
  margin: 20px; /* 增加外边距 */
}

h1 {
  color: #333; /* 标题颜色 */
  margin-bottom: 20px; /* 标题下边距 */
  text-align: center; /* 标题居中 */
}

.pc-view {
  /* PC端特有样式 */
}

.mobile-view {
  /* 移动端特有样式 */
  padding: 0 10px;
}

.task-item-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.task-item-label span {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 2px;
}

.el-table {
  border: 1px solid #ebeef5; /* 表格边框 */
  border-radius: 4px; /* 表格圆角 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.el-table th {
  background-color: #eef1f6; /* 表头背景色 */
  color: #606266; /* 表头文字颜色 */
  font-weight: bold; /* 表头文字加粗 */
}

.el-table td,
.el-table th {
  padding: 12px 0; /* 单元格内边距 */
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa; /* 行悬停背景色 */
}
</style>